<template>
  <div>
    <div id="printTest">
      <div  v-for="item in data" :key="item.code "  style="page-break-after:always">
        <div class="top" style="margin-bottom:1% ; ">
          <span class="top_span">{{item.groupName}}</span>
          <span class="top_span">领用单</span>
          <div style="margin-top:1%">
            <span style="margin-left:8%">仓库：{{item.warehouseName}}</span>
            <span style="margin-left:15%">领用单号：{{item.code}}</span>
          </div>
          <div style="margin-top:1%">
            <span style="margin-left:8%">打印时间：{{date}}</span>
            <span style="margin-left:15%">订单日期：{{item.gmtCreated.substring(0,10)}}</span>
          </div>
          <div style="margin-top:1%">
            <span style="margin-left:8%">备注：{{item.remarks}}</span>
          </div>
        </div>
        <div style="width: 100%;border:1px solid #000000;margin: 0 auto;height:100%;">
          <div style="display: flex;justify-content: center;align-items: center;height:30px;border-bottom: 1px solid #000000;">
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">序号</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品名称</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品编码</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">商品条码</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">单位</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">领用数量</div>
            <div style="height:100%;width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">实际领用数量</div>
          </div>
          <div style="display: flex;justify-content: center;border-bottom: 1px solid #000000;height:100%;word-break:break-all;min-height:30px;" v-for="(item,index) in item.collectItemList" :key="item.id">
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{index + 1}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.goodsName}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.goodCode}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.goodsBarCode}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.goodsUnitName}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.unitQuantity}}</div>
            <div style="width:15%;border-right: 1px solid #000000;text-align:center;display: flex;align-items: center;justify-content: center;">{{item.actualUnitQuantity}}</div>
          </div>
        </div>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-print="'#printTest'">打 印</el-button>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  import {collectDetail} from '@/api/store'
  import moment from 'moment'
  Vue.use(VXETable, VXEUtils, XEUtils, { mounts: ['cookie'] })

  export default {
    props: {
      typeList: {
        type: Array,
        required: true
      },
      warehouseData: {
        type: Array,
        required: true
      },
      printData: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        form:{
          warehouseName: '',
          code: '',
          typeName:'',
          gmtCreated: '',
          remarks: ''
        },

        data:[],
        printDate:'',
        date:'',
        inboundQuantityTotal:0,
        partys:[],
        tableData:[],
      }
    },
    created(){
      this.date = moment().format('YYYY-MM-DD HH:mm:ss')
      this.printDate = moment().format('YYYY-MM-DD HH:mm:ss')
      this.showPrintList()
    },
    methods:{
      showPrintList() {
        this.loading = true
        this.data = []
        this.printData.forEach(i => {
          collectDetail(i).then(response => {
            // response.data.typeName = this.formatterType(response.data.type)
            let warehouseInfo = this.warehouseData.find(i => i.code === response.data.warehouseCode);
            response.data.warehouseName = warehouseInfo ? warehouseInfo.name : '';
            let typeInfo = this.typeList.find(i => i.code === response.data.type);
            response.data.typeName = typeInfo ? typeInfo.name : '';
            this.data.push(response.data)
          })
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  @page{
    size: auto A4 landscape;
    margin: 3mm;
  }

  .dialog-footer {
    margin: 15px 0 15px 0;
    width: 90px;
    float: right;
    font-size: 16px;
    font-weight: bolder;
  }
</style>

<style lang="scss">
#printTest{
  width:100%;
  font-size: 5px;
    .vxe-cell{
      font-weight:normal;
      font-size: 3px !important;
  }

}

  .tittle{
    display: flex;
    justify-content: center;
    align-items: center;

    .tittle-content{
      width: 33%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
.top{
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  margin: 0 auto;
  .top_span{
    margin-top: 1%;
    text-align: center;
  }
  div{
    width: 100%;
    display: flex;
    // justify-content: space-around;
    span{
      width: 48%;
      font-size: 14px;
    }
  }
}
  .middleBottom{
    width:100%;
    min-height:90px;
    border:1px solid #000000;
    margin: 0 auto;
    display: flex;
    .middleBottom-left{
      width: 16.7%;
      color: #000000;
      border-right:1px solid #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .middleBottom-right{
      width: 95%;
      .middleBottom-right-top{
        display: flex;
        justify-content: center;
        align-items: center;
        height:30px;
        border-bottom: 1px solid #000000;
        .middleBottom-right-top-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .middleBottom-right-middle{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-middle-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
      .middleBottom-right-bottom{
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #000000;
        height:30px;
        .middleBottom-right-bottom-content{
          height:100%;
          width:15%;
          border-right:1px solid #000000;
          text-align:center;
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }
    }
  }
</style>
